import React from 'react';
import { Form, Checkbox, Button, Card, Input } from 'antd';
import { connect } from 'dva';

import styles from './index.less';
const namespace = 'returnRoules';
/**
 *  登录界面
 */
@connect(({ loading, returnRoules }) => ({
  rouleId: returnRoules.rouleId,
  rulesDetail: returnRoules.rulesDetail,
  //控制状态，绑定事件
  submitting: loading.effects['login/doLogin']
}))
@Form.create()
class StepFive extends React.Component {
  state = {
    checkedTxt: {
      1: 'of good value',
      2: 'of good value + value',
      3: 'of good value + tax delivery fee'
    }
  };

  render() {
    const { rulesDetail } = this.props;
    const { checkedTxt } = this.state;
    const plainOptions =
      rulesDetail && rulesDetail.productsType && rulesDetail.productsType.indexOf(',') > -1
        ? rulesDetail.productsType.split(',').filter(a => a)
        : [];
    return (
      <div className={styles.stepFive}>
        <Card bordered={false}>
          <div className={styles.ditem}>
            <h3>Furnitrue type</h3>
            <div className={styles.checkedList}>
              <Checkbox.Group
                disabled
                options={
                  rulesDetail && rulesDetail.productsType && rulesDetail.productsType.indexOf(',') == -1
                    ? [rulesDetail.productsType]
                    : plainOptions
                }
              />
            </div>
          </div>
          {/* <div className={styles.ditem}>
            <h3>Retailer&apos;s return policy page link</h3>
            <div className={styles.checkedList}>
              <Input type="text" />
            </div>
          </div> */}
        </Card>
        <Card bordered={false}>
          <div className={styles.ditem}>
            <div className={styles.item}>
              <h3>Return days</h3>
              <div className={styles.txt}>{rulesDetail ? rulesDetail.returnDays : ''} days</div>
            </div>
            <div className={styles.item}>
              <h3>Days calculation</h3>
              <div className={styles.txt}>From the date of purchase</div>
            </div>
            <div className={styles.item}>
              <h3>Packing</h3>
              <div className={styles.txt}>{rulesDetail ? rulesDetail.originalPackingCharge : ''} </div>
            </div>
          </div>
          <div className={styles.ditem}>
            <div className={styles.ditemLeft}>
              <h3>Accepted return Iocations</h3>
              <div style={{ width: '60%' }} className={styles.list}>
                {rulesDetail && rulesDetail.returnLocation && rulesDetail.returnLocation.indexOf(',') > -1 ? (
                  rulesDetail.returnLocation
                    .split(',')
                    .filter(a => a)
                    .map(item => (
                      <div key={item} className={styles.txt}>
                        {item ? item.split('-')[0] : ''}
                      </div>
                    ))
                ) : (
                  <div className={styles.txt}>{rulesDetail ? rulesDetail.returnLocation : ''}</div>
                )}
              </div>
            </div>
            <div className={styles.ditemRight}>
              <h3>Charged return Iocations</h3>
              <div className={styles.list}>
                {rulesDetail && rulesDetail.particularAreas && rulesDetail.particularAreas.indexOf(',') > -1 ? (
                  rulesDetail.particularAreas
                    .split(',')
                    .filter(a => a)
                    .map(item => (
                      <div key={item} className={styles.txt}>
                        {item}
                      </div>
                    ))
                ) : (
                  <div className={styles.txt}>{rulesDetail ? rulesDetail.particularAreas : ''}</div>
                )}
              </div>
            </div>
          </div>
          <div className={styles.checkItem}>
            <h4>Free return service is available in the following states:</h4>
            <div className={styles.list}>
              {rulesDetail && rulesDetail.returnLocation ? (
                rulesDetail.returnLocation
                  .split(',')
                  .filter(a => a)
                  .map(item => {
                    return (
                      <div key={item} className={styles.item}>
                        {item}
                      </div>
                    );
                  })
              ) : (
                <div className={styles.item}>{(rulesDetail && rulesDetail.returnLocation) || ''}</div>
              )}
            </div>
          </div>
          <div className={styles.checkItem}>
            <h4>Extra charge will be required for the following states:</h4>
            <div className={styles.list}>
              {rulesDetail && rulesDetail.particularAreas && rulesDetail.particularAreas.indexOf(',') > -1 ? (
                rulesDetail.particularAreas
                  .split(',')
                  .filter(a => a)
                  .map(item => {
                    return (
                      <div key={item} className={styles.item}>
                        {item}
                      </div>
                    );
                  })
              ) : (
                <div className={styles.item}>{(rulesDetail && rulesDetail.particularAreas) || ''}</div>
              )}
            </div>
          </div>
          <div className={styles.checkItem}>
            <h4>Products are not returnable from the following states:</h4>
            <div className={styles.list}>
              {rulesDetail && rulesDetail.particularAreas && rulesDetail.particularAreas.indexOf(',') > -1 ? (
                rulesDetail.particularAreas
                  .split(',')
                  .filter(a => a)
                  .map(item => {
                    return (
                      <div key={item} className={styles.item}>
                        {item}
                      </div>
                    );
                  })
              ) : (
                <div className={styles.item}>{(rulesDetail && rulesDetail.particularAreas) || ''}</div>
              )}
            </div>
          </div>
        </Card>

        <Card title="Changers" bordered={false}>
          <div className={styles.radiosDitem}>
            <h4>Packing fee standard</h4>
            <div className={styles.text}>
              <span>{rulesDetail ? rulesDetail.packingCharge : ''}</span>
            </div>
          </div>
          <div className={styles.radiosDitem}>
            <h4>Standard return shipping cost</h4>
            <div className={styles.text}>
              charge:<span>{`$ ${rulesDetail ? rulesDetail.freight : 0}`}</span>
            </div>
          </div>
          <div className={styles.radiosDitem}>
            <h4>Cost for special areas</h4>
            <div className={styles.text}>Curbside or threshold pickup</div>
          </div>

          <div className={styles.radiosDitem}>
            <h4>Additional service charge</h4>
            {rulesDetail && rulesDetail.additionalCosts && rulesDetail.additionalCosts.indexOf(',') > -1 ? (
              rulesDetail.additionalCosts.split(',').map((item, index) => {
                return (
                  <div
                    key={item}
                    className={styles.text}
                    style={{ display: item.indexOf('-') > -1 ? 'block' : 'none' }}
                  >
                    {index ? 'Indoor pick-up and packing' : 'Indoor pick-up'}:
                    <span>{`$ ${item.indexOf('-') > -1 ? item.split('-')[1] : 0}`}</span>
                  </div>
                );
              })
            ) : (
              <div className={styles.text}>
                charge:<span>{`$ ${(rulesDetail && rulesDetail.additionalCosts) || 0}`}</span>
              </div>
            )}
          </div>

          <div className={styles.radiosDitem}>
            <h4>Packing fee</h4>
            <div className={styles.text}>
              charge:<span>{`$ ${rulesDetail ? (Number(rulesDetail.packingCost) || 0).toFixed(0) : 0}`}</span>
            </div>
          </div>
          <div className={styles.radiosDitem}>
            <h4>No original packaging</h4>
            <div className={styles.text}>
              charge:
              <span>
                {`$ ${
                  rulesDetail && rulesDetail.damageCompensation && rulesDetail.damageCompensation.indexOf('-') > -1
                    ? rulesDetail.damageCompensation.split('-')[1]
                    : 0
                }`}{' '}
              </span>
            </div>
          </div>

          <div className={styles.radiosDitem}>
            <h4>Repayment method</h4>
            <div className={styles.text}>
              <span style={{ margin: 0 }}>{rulesDetail && rulesDetail.payType === 1 ? 'card' : 'integral'}</span>
            </div>
          </div>
          <div className={styles.radiosDitem}>
            <h4>Damaged goods</h4>
            <div className={styles.text}>
              charge:
              <span>{`[${
                rulesDetail && rulesDetail.damageCompensation && rulesDetail.damageCompensation.indexOf('-') > -1
                  ? rulesDetail.damageCompensation.split('-')[1]
                  : 0
              }%]`}</span>
            </div>
          </div>
          <div className={styles.radiosDitem}>
            <h4>Restocking fee</h4>
            {/* <div className={styles.text}>charge:<span>{`[ ${rulesDetail && rulesDetail.resetReturnFee && rulesDetail.resetReturnFee.indexOf('-') > -1 ? rulesDetail.resetReturnFee.split('-')[1] : 0}%]`}</span></div> */}
            <div className={styles.ditemList}>
              {rulesDetail && rulesDetail.resetReturnFee && rulesDetail.resetReturnFee.indexOf('-') > -1 && (
                <div className={styles.text}>
                  <span style={{ margin: 0 }}>{`[${rulesDetail.resetReturnFee.split('-')[1] || 0}%]`} </span>
                  {checkedTxt[rulesDetail.resetReturnFee.split('-')[0] || 1]}
                </div>
              )}
              {/* <div className={styles.text}><span>{`[${rulesDetail && rulesDetail.resetReturnFee && rulesDetail.resetReturnFee.indexOf('-') > -1 ? rulesDetail.resetReturnFee.split('-')[1] : 0}%]`} </span>of good value + tax</div>
              <div className={styles.text}><span>{`[${rulesDetail && rulesDetail.resetReturnFee && rulesDetail.resetReturnFee.indexOf('-') > -1 ? rulesDetail.resetReturnFee.split('-')[1] : 0}%]`} </span>of good value+ tax delivery fee</div> */}
            </div>
          </div>
        </Card>

        <Card title="Trucking service" bordered={false}>
          <div className={styles.ditem}>
            <h3>The Return Company</h3>
            <h3>States</h3>
            <div className={styles.list}>
              {rulesDetail && rulesDetail.returnLocation && rulesDetail.returnLocation.indexOf(',') > -1 ? (
                rulesDetail.returnLocation.split(',').map(item => {
                  return (
                    <div key={item} className={styles.item}>
                      {item}
                    </div>
                  );
                })
              ) : (
                <div className={styles.item}>{rulesDetail ? rulesDetail.returnLocation : ''}</div>
              )}
            </div>
          </div>
          <div className={styles.ditem}>
            <h3>Pilot</h3>
            <h3>States</h3>
            <div className={styles.list}>
              {rulesDetail && rulesDetail.particularAreas && rulesDetail.particularAreas.indexOf(',') > -1 ? (
                rulesDetail.particularAreas.split(',').map(item => {
                  return (
                    <div key={item} className={styles.item}>
                      {item}
                    </div>
                  );
                })
              ) : (
                <div className={styles.item}>{rulesDetail ? rulesDetail.particularAreas : ''}</div>
              )}
              {/* <div className={styles.item}>CA</div> */}
            </div>
          </div>
        </Card>

        <div className={styles.btnList}>
          {/* <Button htmlType="submit" className={styles.formBtn}>Save</Button> */}
          <Button
            htmlType="submit"
            onClick={() => {
              this.props.dispatch({
                type: `${namespace}/save`,
                payload: {
                  stepCurrent: 5
                }
              });
            }}
            className={styles.formBtn}
          >
            Confirm
          </Button>
        </div>
      </div>
    );
  }
}
export default StepFive;
